<template>
    <div>
        <header>
            <a href="javascript:;" class="left">
                <i class="iconfont icon-up21" @click="handleHome"></i>
            </a>
            <p>订单列表</p>
            <a href="javascript:;" class="right">
                <i class="iconfont icon-kefu1"></i>
            </a>
        </header>
        <section>
            <div class="xsui-tab-type">
                <div class="new-tbl-type">
                <a
                    v-for="(item, index) in list"
                    :key="index"
                    href="javascript:;"
                    @click="handleJump(index)"
                    :class="['new-tbl-cell', index == idx ? 'on' : '']"
                >
                    {{ item }}
                </a>
                </div>
            </div>
            <div>
                <div style="text-align: center;padding-top: 20px;">
                    <a href="javascript:;">
                        <img src="http://m.vnasi.com/statics/images/normalOrder.png" style="width:150px;">
                    </a>
                </div>
                <p style="font-size:22px;color: #999999;text-align: center;margin: 10px 0">未发现有您的订单！</p>
                <p style="font-size:18px;color: #999999;text-align: center;margin-top: 10px">
                <p style="text-align:center;height:40px;margin-top:15px">
                    <a @click="jump" id="ahref" href="#" style="padding: 0 20px;border:1px solid #ccc;height:40px;line-height:40px;display:inline-block;color:#000" to="/">去首页逛逛</a>
                </p>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: ["待付款", "待收货", "已完成","全部订单"],
            idx: 0,
        };
    },
    methods: {
        handleJump(i){
            this.idx=i
        },
         handleHome(){
          this.$router.push('/myspec')
        },
        jump(){
            this.$router.push('/')
        }
    },
}
</script>

<style src="../assets/css/detail.css" scoped></style>
<style src="../assets/css/reset.css" scoped></style>
<style src="../assets/font/iconfont.css" scoped></style>
<style scoped>
.new-tbl-type a{
  color: #888;
  width: 25% !important;
}
</style>